<template>
    <div class="w-full lg:h-700  flex items-center flex-col" :class="bgc">
        <div class="lg:py-16 md:py-10 py-5 ld:text-3xl text-2xl tracking-widest">{{ title }}</div>
        <ul class="flex w-full justify-around flex-col md:flex-row">
            <li
                class=" md:h-484 flex 2xl:w-296 md:w-full 2xl:mx-32 xl:mx-24 lg:mx-10 mx-3 flex-col items-center justify-between border-t-2 md:border-t-0 mb-3"
                v-for="(item, index) in state.home.keshi.contents"
                :key="index.toString()"
            >
                <div>
                    <img :src="item.image" class="w-28 h-28" />
                </div>
                <div class="text-2xl">{{ item.name }}</div>
                <div class="contentContainer md:overflow-scroll md:h-264 py-3 md:py-0">
                    <p
                        class="content px-5 md:px-0 text-sm text-justif my-3 md:my-0"
                        v-for="(item1, index) in item.content"
                        :key="index.toString()"
                    >{{ item1 }}</p>
                </div>
                <div class="">
                    <a :href="state.weChat.link" class="text-sm mt-3 px-5 py-1 border rounded text-link border-link">{{ linkText }}</a>
                </div>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { state } from "@utils/store";
import { defineProps } from "vue";
defineProps(['title', 'linkText', 'bgc'])



</script>

<style lang="scss">

.content {
    text-indent: 2em;
    line-height: 1.5em;
    letter-spacing: .1em;
}
</style>